<!-- Created by henian.xu on 2018/11/16. -->

<template>
    <div class="prop-bar">
        <div
            class="item"
            v-for="(item) in value.selectBrandList"
            :key="item.id">
            品牌: {{ item.brandName }}
            <div
                class="del"
                @click="onBrandDel(item)">X
            </div>
        </div>
        <div
            class="item"
            v-for="(prop) in value.selectGoodsPropValueList"
            :key="prop.pid">
            {{ prop.pn }}:
            <template v-for="(v,i) in prop.v">
                <template v-if="i">、</template>
                {{ v.vn }}
            </template>

            <div
                class="del"
                @click="onPropDel(prop)">X
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PropBar',
    data() {
        return {};
    },
    props: {
        value: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    computed: {
        brandIds() {
            return this.$route.query.brandIds || '';
        },
        propValue() {
            return this.$route.query.propValue || '';
        },
        propValueList() {
            if (!this.propValue) return [];
            const res = [];
            const props = this.propValue.split(',');
            props.forEach(prop => {
                // 5-8|9,3-1|2
                if (!prop) return;
                const obj = {};
                const propArr = prop.split('-');
                obj.pid = +propArr[0];
                const vArr = propArr[1].split('|');
                obj.v = vArr.reduce((p, c) => (p.push(+c), p), []);
                res.push(obj);
            });
            return res;
        },
    },
    methods: {
        onBrandDel(item) {
            const brandIdArr = this.brandIds.split(',').filter(i => item.id !== +i);
            this.$utils.Comm.gotoUrl({
                query: {
                    brandIds: brandIdArr.join(','),
                },
            });
        },
        onPropDel(prop) {
            // const propList = JSON.parse(JSON.stringify(this.propValueList));
            const propList = this.propValueList.filter(i => prop.pid !== i.pid);
            console.log(propList);
            this.$utils.Comm.gotoUrl({
                query: {
                    propValue: propList.map(prop => `${prop.pid}-${prop.v.join('|')}`).join(','),
                },
            });
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';

.prop-bar {
    display: inline-block;
    vertical-align: middle;
    @include clearfix;

    > .item {
        position: relative;
        float: left;
        background-color: $gray1;
        border: 1px solid $color-border;
        padding: $padding-small ($padding + 28) $padding-small $padding;

        + .item {
            margin-left: $margin-small;
        }

        > .del {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 28px;
            line-height: 28px;
            text-align: center;
            color: $color-red;
            cursor: pointer;
        }

        &:hover {
            border-color: $color-red;
            > .del {
                background-color: $color-red;
                color: #fff;
            }
        }
    }
}
</style>
